<template>
	<view class="index-page">
		<image class="header-bg" src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/index/index-head.png"
			mode=""></image>
		<view class="wrap-1">
			<!-- 快捷导航 -->
			<view class="smart-menu">
				<navigator url="/pages/agricTrace/index" class="item">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/index/icon-1.png" mode="">
					</image>
					<text class="u-font-28">农产溯源</text>
				</navigator>
				<navigator url="/pages/shop/index" class="item">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/index/icon-2.png" mode="">
					</image>
					<text class="u-font-28">物华有余</text>
				</navigator>
				<navigator url="/pages/vallige/index" class="item">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/index/icon-3.png" mode="">
					</image>
					<text class="u-font-28">乡村文旅</text>
				</navigator>
				<navigator url="/pages/recruit/index" class="item">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/index/icon-4.png" mode="">
					</image>
					<text class="u-font-28">招工就业</text>
				</navigator>
			</view>
			<!-- 公告 -->
			<view class="notice-wrap">
				<image class="bg" src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/index/notice-bg.png"
					mode=""></image>
				<div class="u-flex content">
					<image class="notice-1"
						src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/index/notice-1.png" mode="">
					</image>
					<div class="line"></div>
					<navigator url="" class="">
						<!-- <image class="icon-notice"
							src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-notice.png" mode="">
						</image>
						<text class="u-font-26 u-flex-1">暂无通知公告</text>
						<u-icon class="u-content-color" name="arrow-right"></u-icon> -->
						<view class="" style="width: 520rpx;height: 54rpx;position: relative;top: -10rpx;">
							<u-notice-bar mode="horizontal" :list="notifyList_new" type='warning' :is-circular="false"
								:more-icon='true' @getMore='ongetMore' @click='onClick' duration='3000' speed='260'></u-notice-bar>
						</view>
					</navigator>

				</div>
			</view>
			<!-- 风采余江 -->
			<view class="title u-flex">
				<view class="line"></view>
				<text class="u-font-40 u-flex-1 blod">风采余江</text>
				<navigator url="" class="u-flex u-font-26">
					精选乡村已收录
					<text class="u-font-36 green blod">{{ featured }}</text>
					个
					<u-icon name="arrow-right"></u-icon>
				</navigator>
			</view>
			<view class="village-wrap u-rela">
				<image class="img-0"
					src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-index-1.png" mode="">
				</image>
				<view class="text-1">山重水复疑无路·柳暗花明又一村</view>
				<!-- 了解更多 -->
				<navigator url="/pages/vallige-travel/more" class="more">了解更多</navigator>
				<!-- 全部乡村 -->
				<div class="village u-flex">
					<u-icon color="#fff" size="28" name="play-right-fill"></u-icon>
					<navigator class="v-item" :url="`/pages/vallige-travel/detail?id=${item.id}`"
						v-for="item in villages_index_list" :key="item.id">
						<u-image radius="10"
							:src="item.thumbnail =='' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-vatr-2.png' : item.thumbnail"
							width="156rpx" height="202rpx">
						</u-image>
						<text>{{ item.name }}</text>
					</navigator>
					<!-- <navigator class="v-item" url="/pages/vallige-travel/detail">
						<u-image radius="10" src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-vatr-3.png" width="156rpx" height="202rpx">
						</u-image>
						<text>查山村</text>
					</navigator>
					<navigator class="v-item" url="/pages/vallige-travel/detail">
						<u-image radius="10" src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-vatr-4.png" width="156rpx" height="202rpx">
						</u-image>
						<text>荷塘村</text>
					</navigator> -->
					<navigator url="/pages/vallige-travel/index" class="list">全部乡村 >></navigator>
				</div>
			</view>
			<!-- 建筑风情 -->
			<navigator class="building-wrap" url="/pages/building/index">
				<div class="content">
					<text class="u-font-50 blod">建筑风情</text>
					<text class="u-font-20 u-m-t-20">乡村标志性建筑</text>
				</div>
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/index/img-1.png" mode=""></image>
			</navigator>
			<!-- 非遗传承 -->
			<navigator class="building-wrap" url="/pages/feiyi/index">
				<div class="content">
					<text class="u-font-50 blod">非遗传承</text>
					<text class="u-font-20 u-m-t-20">沉浸式感受非遗文化魅力</text>
				</div>
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/index/img-2.png" mode=""></image>
			</navigator>
			<!-- 美食物产 -->
			<navigator url="/pages/food/index" class="building-wrap">
				<div class="content">
					<text class="u-font-50 blod">美食物产</text>
					<text class="u-font-20 u-m-t-20">舌尖上的乡村美食</text>
				</div>
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/index/img-3.png" mode=""></image>
			</navigator>
		</view>
		<!-- 魅力余江 -->
		<view class="title u-flex">
			<view class="line"></view>
			<text class="u-font-40 u-flex-1 blod">魅力余江</text>
			<navigator url="/pages/travel/index" class="u-flex">
				<text>特色旅游景点已收录</text>
				<text class="u-font-36 green blod">{{ meiliyj_total }}</text>
				个
				<u-icon name="arrow-right"></u-icon>
			</navigator>
		</view>
		<view class="meiliyj-wrap">
			<!-- 大图内容 -->
			<div class="big-img-wrap">
				<image style="width:690rpx;height: 350rpx;"
					src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/index/meili-img-1.png" mode="">
				</image>
				<u-image class="big-img"
					src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/index/meili-img-2.png" width="630rpx"
					height="320rpx">
				</u-image>
				<view class="text-wrap-1">
					乡村旅游别样红<br />
					最美 <text>余江</text>莫辜负</view>
				<view class="text-wrap-2 u-font-28">
					余江区历史悠久、人文荟萃，在这个充满活力和生
					机的地方您可以体验到丰富多彩的文化和自然景观。
				</view>
			</div>
			<!-- 左右图文 风景区 -->
			<navigator :url="`/pages/travel/detail?id=${item.id}`" class="item u-flex"
				v-for="item in travel_hotList_list_child" :key="item.id">
				<u-image class="small-img"
					:src="item.thumbnail == '' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/index/meili-img-2.png' : item.thumbnail"
					width="180rpx" height="220rpx">
				</u-image>
				<text class="fixed-text">{{item.title}}</text>
				<div class="right u-flex-1">
					<view class="u-font-34 u-line-1 blod">{{item.title}}</view>
					<view class="desc u-m-t-20 u-line-2">
						{{ item.description }}
					</view>
					<view class="u-flex u-m-t-20">
						<image style="width: 22rpx;height: 22rpx;margin-right: 6rpx;"
							src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-view.png" mode="">
						</image>
						<text class="u-flex-1">{{ item.watch }}次查看</text>
						<navigator class="btn-view" url="">去这里</navigator>
					</view>
				</div>
			</navigator>
			<!-- <navigator url="/pages/travel/detail" class="item u-flex">
				<u-image class="small-img"
					src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/index/meili-img-2.png" width="180rpx"
					height="220rpx">
				</u-image>
				<text class="fixed-text">龙虎山</text>
				<div class="right u-flex-1">
					<view class="u-font-34 u-line-1 blod">龙虎山风景区</view>
					<view class="desc u-m-t-20 u-line-2">
						典型的丹霞地貌结构，交通很方便，高铁
						站下车后对面坐23路半小时。
					</view>
					<view class="u-flex u-m-t-20">
						<image style="width: 22rpx;height: 22rpx;"
							src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-view.png" mode="">
						</image>
						<text class="u-flex-1">1198次查看</text>
						<navigator class="btn-view" url="">去这里</navigator>
					</view>
				</div>
			</navigator> -->
			<!-- 查看更多 -->
			<navigator url="/pages/travel/index" class="more">
				<text class="u-p-r-12">查看更多</text>
				<image style="width: 16rpx;height: 16rpx;"
					src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-more.png" mode=""></image>
			</navigator>
		</view>
		<!-- 特色路线 -->
		<view class="title u-flex u-m-t-60">
			<view class="line"></view>
			<text class="u-font-40 u-flex-1 blod">特色路线</text>
			<navigator url="/pages/route/index" class="u-flex u-row-center btn-more">
				<text class="u-font-20 u-tips-color">查看更多</text>
				<u-icon class="icon-arrow" name="arrow-right"></u-icon>
			</navigator>
		</view>

		<!-- <navigator :url="`/pages/route/detail?id=${item.id}`" class="teselx-wrap u-flex"
			v-for="item in travel_featureList_list_child" :key="item.id">
			<div class="u-p-30 u-flex-1" style="width: calc(100% - 240rpx);">
				<view class="u-font-34 u-line-1 blod">{{ item.title }}</view>
				<view class="desc u-m-t-20 u-line-2">
					{{ item.description }}
				</view>
				<view class="u-flex u-m-t-70 u-border-top u-p-t-20">
					<image style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"
						src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-view.png" mode=""></image>
					<text class="u-flex-1 u-line-1" style="white-space: unset;">{{ item.address }}</text>
				</view>
			</div>
			<u-image class="img"
				:src="item.thumbnail == '' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/index/meili-img-2.png' : item.thumbnail"
				width="240rpx" height="300rpx">
			</u-image>
		</navigator> -->

		<view class="uni-margin-wrap">
			<swiper class="swiper swiper1" circular :indicator-dots="false" :autoplay="true" interval="2000" :duration="1000">
				<swiper-item v-for="item in travel_featureList_list_child" :key="item.id">
					<view class="swiper-item uni-bg-red">
						<navigator :url="`/pages/route/detail?id=${item.id}`" class="teselx-wrap u-flex">
							<div class="u-p-30 u-flex-1" style="width: calc(100% - 240rpx);">
								<view class="u-font-34 u-line-1 blod">{{ item.title }}</view>
								<view class="desc u-m-t-20 u-line-2">
									{{ item.description }}
								</view>
								<view class="u-flex u-m-t-70 u-border-top u-p-t-20">
									<image style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"
										src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-view.png"
										mode=""></image>
									<text class="u-flex-1 u-line-1"
										style="white-space: unset;">{{ item.address }}</text>
								</view>
							</div>
							<u-image class="img"
								:src="item.thumbnail == '' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/index/meili-img-2.png' : item.thumbnail"
								width="240rpx" height="300rpx">
							</u-image>
						</navigator>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				meiliyj_total: '',

				villages_index_list: [], //风采余江列表
				travel_hotList_list: [], //魅力余江列表
				travel_hotList_list_child: [],
				travel_featureList_list: [], //特色路线列表
				travel_featureList_list_child: [],

				featured: '', //精选乡村总数

				categoryList: ["热门旅游", "特色路线", "触见历史", "环境格局", "民俗文化", "传统建筑", "美食物产"],

				notifyList: [], //通知公告
				notifyList_new: [],
			}
		},
		onLoad() {
			// 数据初始化
			this.dataInit()
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中...'
			});
			// 数据初始化
			this.dataInit()
		},
		methods: {
			// 数据初始化
			dataInit() {
				// 魅力余江数量统计
				this.get_index_hotStatistics();

				// 风采余江列表
				this.get_villages_index();

				// 乡村统计
				this.get_villages_statistics();

				// 分类
				this.get_category_index();

				// 通知公告列表
				this.get_notify_index()
			},

			// 魅力余江数量统计
			get_index_hotStatistics() {
				this.$http({
					url: this.api.index_hotStatistics,
					method: 'GET',
				}).then(res => {
					// console.log(res,'魅力余江数量统计');
					if (res.code == 1) {
						this.meiliyj_total = res.data.total;
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				})
			},

			// 风采余江列表
			get_villages_index() {
				this.$http({
					url: this.api.villages_index,
					method: 'GET',
				}).then(res => {
					// console.log(res, '风采余江列表');
					if (res.code == 1) {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						if (res.data.list.length > 2) {
							this.villages_index_list = res.data.list.slice(0, 3)
						} else {
							this.villages_index_list = res.data.list
						}

					}
				})
			},

			// 魅力余江列表
			get_travel_hotList(category_id) {
				this.$http({
					url: this.api.travel_hotList,
					method: 'GET',
					data: {
						category_id
					}
				}).then(res => {
					// console.log(res, '魅力余江列表');
					if (res.code == 1) {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						res.data.list.forEach(e => {
							this.travel_hotList_list_child.push(e)

						})
						this.travel_hotList_list_child = this.travel_hotList_list_child.slice(0, 2)
					}
				})
			},

			// 特色路线列表
			get_travel_featureList(category_id) {
				this.$http({
					url: this.api.travel_featureList,
					method: 'GET',
					data: {
						category_id
					}
				}).then(res => {
					// console.log(res, '特色路线列表');
					if (res.code == 1) {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						res.data.list.forEach(e => {
							this.travel_featureList_list_child.push(e)
						})
					}
				})
			},

			// 乡村统计
			get_villages_statistics() {
				this.$http({
					url: this.api.villages_statistics,
					method: 'GET',
				}).then(res => {
					// console.log(res, '乡村统计');
					if (res.code == 1) {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						this.featured = res.data.featured
					}
				})
			},

			// 分类
			get_category_index() {
				this.categoryList.forEach(category => {
					this.$http({
						url: this.api.category_index,
						method: 'GET',
						data: {
							type: category
						}
					}).then(res => {
						if (res.code == 1) {
							uni.hideLoading();
							uni.stopPullDownRefresh();
							// console.log(res);
							if (category == '热门旅游') {
								this.travel_hotList_list = res.data
								this.travel_hotList_list.forEach(el => {
									this.get_travel_hotList(el.category_id)
								})

							} else if (category == '特色路线') {
								this.travel_featureList_list = res.data
								this.travel_featureList_list.forEach(el => {
									this.get_travel_featureList(el.category_id)
								})
							}
						}
					})
				})

			},

			// 通知公告列表
			get_notify_index() {

				this.$http({
					url: this.api.notify_index,
					method: 'GET',
				}).then(res => {
					// console.log(res,'通知公告列表');
					if (res.code == 1) {
						this.notifyList = res.data.list
						res.data.list.forEach(el => {
							this.notifyList_new.push(el.title)
						})
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				})
			},

			// 
			onClick(index) {
				console.log(this.notifyList_new[index]);
				let arr = this.notifyList.filter(item => item.title == this.notifyList_new[index])
				console.log(arr[0].id);
				uni.navigateTo({
					url: `/pages/message/detail?id=${arr[0].id}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrap-1 {
		position: relative;
		margin-top: -100rpx;
		background: linear-gradient(to bottom, #fff 50%, transparent);
		padding: 50rpx 30rpx 30rpx;
		border-radius: 10rpx;
		border-start-start-radius: 50rpx;
		border-start-end-radius: 50rpx;
		z-index: 2;
	}

	.header-bg {
		width: 100%;
		height: 533rpx;
		position: relative;
		z-index: 1;
	}

	.smart-menu {
		display: grid;
		grid-template-columns: repeat(4, 25%);

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 94rpx;
				height: 94rpx;
			}

			text {
				font-size: 20rpx;
				margin-top: 10rpx;
			}
		}
	}

	.notice-wrap {
		width: 750rpx;
		height: 153rpx;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.content {
			position: relative;
			z-index: 2;
			width: 100%;
			height: 100%;
			padding: 0 56rpx;
		}

		.notice-1 {
			width: 54rpx;
			height: 54rpx;
		}

		.notice-1 {
			width: 54rpx;
			height: 54rpx;
		}

		.icon-notice {
			width: 28rpx;
			height: 28rpx;
		}

		.line {
			width: 1px;
			height: 50rpx;
			background: #E6E6E6;
			margin-left: 27rpx;
			margin-right: 20rpx;
		}
	}

	.village-wrap {
		margin-top: 32rpx;
		width: 690rpx;
		height: 542rpx;

		.img-0 {
			width: 690rpx;
			height: 542rpx;
			position: relative;
		}

		.text-1 {
			position: absolute;
			top: 145rpx;
			left: 0;
			width: 100%;
			text-align: center;
			color: #fff;
			font-size: 28rpx;
			z-index: 2;
		}

		.more {
			width: 180rpx;
			height: 60rpx;
			background: #FFFFFF;
			border: 1px solid #00A46C;
			border-radius: 30rpx;
			top: 197rpx;
			left: 255rpx;
			position: absolute;
			z-index: 2;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #00A46C;
			line-height: 60rpx;
			text-align: center;
		}

		.village {
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 240rpx;
			background: rgba(148, 75, 27, 0.4);
			border-radius: 0px 0px 20rpx 20rpx;
			padding: 20rpx 8rpx;
			box-sizing: border-box;

			.v-item {
				margin-right: 15rpx;
				position: relative;
				border: 1px solid #FFFFFF;
				border-radius: 10rpx;
				overflow: hidden;

				text {
					position: absolute;
					left: 0;
					width: 100%;
					top: 50%;
					transform: translateY(-50%);
					text-align: center;
					font-size: 34rpx;
					font-family: AlimamaDongFangDaKai;
					font-weight: 400;
					color: #FFFFFF;
					text-shadow: 0px 0px 19px rgba(0, 0, 0, 0.35);
				}

			}

			.list {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 30rpx;
				text-align: center;
			}
		}

	}

	.building-wrap {
		width: 690rpx;
		height: 240rpx;
		margin-top: 40rpx;
		position: relative;

		.content {
			position: absolute;
			z-index: 2;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #fff;
		}

		image {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 1;
		}
	}

	.title {
		width: 690rpx;
		margin: 0 auto;

		.line {
			width: 9rpx;
			height: 34rpx;
			background: #FBCA4D;
			border-radius: 5rpx;
			margin-right: 10rpx;
		}

		.btn-more {
			width: 130rpx;
			height: 44rpx;
			border: 1px solid #CCCCCC;
			border-radius: 22rpx;

		}

		.icon-arrow {
			color: #999;
			font-size: 20rpx;
		}
	}

	// 魅力余江
	.meiliyj-wrap {
		width: 690rpx;
		margin: 0 auto;
		background-color: #fff;
		padding-bottom: 10rpx;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;

		.big-img-wrap {
			margin-top: 30rpx;
			height: 572rpx;
			position: relative;

			.big-img {
				position: relative;
				display: block;
				margin: 0 auto;
				top: -280rpx;
				width: 630rpx;
				height: 320rpx;
			}

			.text-wrap-1 {
				position: absolute;
				top: 260rpx;
				left: 56rpx;
				color: #fff;
				font-size: 40rpx;

				text {
					color: #FFED73
				}
			}

			.text-wrap-2 {
				position: relative;
				top: -250rpx;
				width: 630rpx;
				margin: 0 auto;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #DDDDDD;
			}
		}

		.item {
			width: 630rpx;
			margin: 30rpx 30rpx 0;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #DDDDDD;
			position: relative;

			.small-img {
				width: 180rpx;
				height: 220rpx;
				margin-right: 20rpx;
			}

			.fixed-text {
				position: absolute;
				bottom: 50rpx;
				left: 132rpx;
				color: #fff;
				font-size: 30rpx;
				writing-mode: vertical-rl;
			}

			.btn-view {
				width: 140rpx;
				height: 60rpx;
				border: 1px solid #07C160;
				border-radius: 30rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #07C160;
				line-height: 60rpx;
				text-align: center;
			}

		}

		.more {
			width: 240rpx;
			height: 66rpx;
			background: #F5F5F5;
			border: 2rpx solid #CCCCCC;
			border-radius: 33rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 66rpx;
			text-align: center;
			margin: 30rpx auto;

		}
	}

	// 特色路线
	.teselx-wrap {
		width: 690rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0rpx auto;
		overflow: hidden;

		.img {
			width: 240rpx;
			height: 300rpx;
		}
	}
</style>
<!-- scoped加上后无法覆盖公共样式中的page样式 -->
<style>
	page {
		padding: 0;
		padding-bottom: 30rpx;
	}

	.swiper1 {
		height: 300rpx;
		margin-top: 30rpx;
	}
</style>